<template>
	<div class="container">
		<p>
			Please consider using
			[`vue-virtual-scroller`](<a href="https://github.com/Akryum/vue-virtual-scroller"
				target="_blank">https://github.com/Akryum/vue-virtual-scroller</a>)
			if you are looking for more features.
		</p>
		<ul v-bind="containerProps">
			<li v-bind="wrapperProps">
				<div v-for="item in list" :key="item.data.id">
					{{ item.data.name }}
				</div>
			</li>
		</ul>
	</div>
</template>

<script setup>
import { useVirtualList } from "@vueuse/core";
import { ref } from "vue";

const mockList = ref([])
setTimeout(() => {
	mockList.value = new Array(100).fill(1).map((item, i) => {
		return {
			id: `${i + 1}`,
			name: `数kjakdkas啊撒大声地科拉深孔打开是老大拉卡萨阿萨德立卡克里斯丁考拉苏卡达拉萨打卡上漏打卡拉萨打撒据${i + 1
				}`,
		};
	});
}, 1000)
const { list, containerProps, wrapperProps } = useVirtualList(mockList, {
	itemHeight: 22,
});
</script>
<style lang="less" scoped>
.container {
	ul {
		max-height: 300px;
		overflow: auto;
	}
}

.scroller1 {
	height: 300px;
}

.user {
	height: 32%;
	padding: 0 12px;
	display: flex;
	align-items: center;
}
</style>
